<template>
    <div>
<!--      <el-container class="all" :style="{ 'min-height': height }">-->
      <el-container class="all" style="height: 900px">
        <el-header style="background: #d3d7d4">
          <el-row>
            <el-col :offset="8" :span="8" align="middle" type="flex">
              <h1>校园服务平台欢迎您</h1>
            </el-col>
            <el-col class="userImg" :span="8" >
              <el-row>
                <el-avatar :src="user.img" ></el-avatar>
                <span style="margin-left: 10px"><b>{{user.name}}</b> 同学~</span>
              </el-row>
            </el-col>
          </el-row>
        </el-header>
        <el-container>
<!--          <el-aside :width="menuWidth" style="border-right: #a1a3a6 1px solid;" >-->
          <el-aside style="border-right: #a1a3a6 1px solid;width: 200px" >

<!--            <i class="el-icon-s-fold" @click="menuOpenAndClose" style="width: 20px"></i>-->
<!--            <el-menu default-active="1" :collapse="isCollapse" ref="menu">-->
            <el-menu default-active="1" ref="menu">
              <el-menu-item index="1" @click="goView('/stu')">
                <i class="el-icon-menu"></i>
                <span slot="title">个人设置</span>
              </el-menu-item>
              <el-menu-item index="2" @click="goView('/edm')">
                <i class="el-icon-menu"></i>
                <span slot="title">教务系统</span>
              </el-menu-item>
              <el-menu-item index="3" @click="goView('/fom')">
                <i class="el-icon-menu"></i>
                <span slot="title">新生入校服务</span>
              </el-menu-item>
              <el-menu-item index="4" @click="goView('/gdm')">
                <i class="el-icon-menu"></i>
                <span slot="title">毕业设计服务</span>
              </el-menu-item>
              <el-menu-item index="5" @click="goView('/ojm')">
                <i class="el-icon-menu"></i>
                <span slot="title">网课服务</span>
              </el-menu-item>
              <el-menu-item index="6" @click="goView('/study')">
                <i class="el-icon-menu"></i>
                <span slot="title">学习服务</span>
              </el-menu-item>
              <el-menu-item index="7" @click="exitSystem()">
                <i class="el-icon-error"></i>
                <span slot="title">退出系统</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
    export default {
      name: "Home",
      computed: {
        ...mapGetters([
          'userId',
          'username',
          'img'
        ])
      },
      data(){
        return{
          height: '',
          user: {
            img: '',
            name: '',
            id: ''
          },
          menuWidth: 200,
          isCollapse: true
        }
      },
      created() {
          // console.log(document.documentElement['clientHeight'])
        // this.height = window.innerHeight + 'px';
        this.init();
      },
      methods:{
        init(){
          this.user.id = this.userId
          this.user.name = this.username
          this.user.img = this.img
        },
        menuOpenAndClose(){
          this.isCollapse = !this.isCollapse
          this.
          console.log(this.$refs.menu.$el.offsetWidth)
          console.log(this.$refs.menu)
        },
        goView(path){
          this.$router.push({path})
        },
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        exitSystem(){
          this.$store.commit("setLoginIn", false)
          this.$router.push({path: '/'})
        }
      }
    }
</script>

<style scoped>
  .all{
    padding: 0;
    margin: 0;
    overflow:auto;
  }
  .userImg{
    margin-top: 0.5%;
    padding-left: 23%;
  }
</style>
